<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>

    <form action="" id="form1">
      <input type="text" name="uname" autocomplete="off">
      <input type="password" name="upwd">
      <button type="submit">提交</button>
    </form>


    <!-- 文件选择框 -->
    <input type="file" id="file1">
    <!-- 上传文件的按钮 -->
    <button id="butUpload">上传文件</button>

    <!-- 进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        45%
      </div>

    </div>

    <br>
    <img src="" alt="" id="img" width="800px">

    <script src="./js/itheima.js"></script>
    <script type="text/javascript">
      itheima({
        method: 'get',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        success: function (res) {
          console.log(res)
        },
      })

      // itheima({
      //   mehtod: "post",
      //   url: 'http://www.liulongbin.top:3006/api/addbood',
      //   data: {
      //     bookname: "刻意练习",
      //     author: 'xxx',
      //     publisher: '人民图书出版社'
      //   },
      //   success: function(res){
      //     console.log(res);
      //   }
      // })

      var xhr = new XMLHttpRequest()
      // 设置 超时时间
      xhr.timeout = 30
      // 设置超时以后的处理函数
      xhr.ontimeout = function(){
        console.log("请求超时!!");
      }
      xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 4) {
          console.log(xhr.responseText)
        }
      }

      //1、创建 FormData 实例
      var fd = new FormData()
      //2、调用 append 函数，向 fd 中追加数据
      fd.append('uname', 'zs')
      fd.append('upwd', '123456')
      var xhr2 = new XMLHttpRequest();
      xhr2.open('post', 'http://www.liulongbin.top:3006/api/formdata');
      xhr2.send(fd)
      xhr2.onreadystatechange = function(){
        if(xhr2.readyState === 4 && xhr2.status === 200){
          console.log(JSON.parse(xhr2.responseText))
        }
      }

      ;(function(){
        var form = document.querySelector("#form1")
        form.addEventListener('submit', function(e){
          e.preventDefault()

          var fd = new FormData(form)
          var xhr3 = new XMLHttpRequest()
          xhr3.open('post', 'http://www.liulongbin.top:3006/api/formdata')
          xhr3.send(fd)
          xhr3.onreadystatechange = function(){
            if(xhr3.status === 200 && xhr3.readyState === 4){
              console.log(JSON.parse(xhr3.responseText));
            }
          }
        })
      })()

      ;(function(){
        // 1、获取到文件上传按钮
        var btnUpload = document.getElementById('butUpload');
        //2、为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function(){
          //3、获取到用户选择的文件列表
          var files = document.getElementById('file1').files
          if(files.length <= 0){
            return alert('请选择要上传的文件')
          }
          var fd = new FormData()
          // 将用户选择的文件，添加到FormData中
          fd.append('avatar', files[0]);

          var xhr = new XMLHttpRequest()

          // 监听文件上传的进度
          xhr.upload.onprogress = function(e){
            if(e.lengthComputable){
              //e.loaded 已经传输的字节
              //e.total 需传输的总字节
              var procentComplete = Math.ceil((e.loaded / e.total) * 100);
              var tuxiao = document.getElementsByClassName('progress-bar')[0];
              tuxiao.style.width = procentComplete + "%";
              tuxiao.innerHTML = (procentComplete + '%');
            }
          }
          // 监听上传完成的事件
          xhr.upload.onload = function(){
            var item = document.getElementsByClassName('progress-bar')[0];
            item.className = 'progress-bar progress-bar-success';
          }

          xhr.open('POST', "http://www.liulongbin.top:3006/api/upload/avatar")
          xhr.send(fd);

          xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
              var data = JSON.parse(xhr.responseText)
              if(data.status === 200){
                // 将服务器返回的图片地址，设置为<img>标签 src 属性
                document.getElementById("img").src = 'http://www.liulongbin.top:3006' + data.url;
                console.log(data);
              }else{
                // 上传文件失败
                console.log(data.message)
              }
            }
          }
        })
      })()


    </script>
  </body>
</html>
